<template>
	<div class="attr-wrap">
		<a-form-model-item label="">
			<a-select
				v-model="value.attr.attrName"
				placeholder="请选择"
				class="select-leng-l"
				@change="attrChange"
				show-search
			>
				<template v-if="arttrType === 'user'">
					<a-select-option
						:title="attr.attrName"
						:value="attr.attrName"
						v-for="attr in userProperties"
						:key="attr.attrCode"
						:label="attr"
					>
						{{ attr.attrName }}
					</a-select-option>
				</template>
				<template v-else>
					<a-select-opt-group>
						<span slot="label">—事件属性—</span>
						<a-select-option
							:title="attr.attrName"
							:value="attr.attrName"
							v-for="attr in eventProperties.eventAttrs"
							:key="attr.attrCode"
							:label="attr"
						>
							{{ attr.attrName }}
						</a-select-option>
					</a-select-opt-group>
					<a-select-opt-group>
						<span slot="label">—用户属性—</span>
						<a-select-option
							:title="attr.attrName"
							:value="attr.attrName"
							v-for="attr in eventProperties.userAttrs"
							:key="attr.attrCode"
							:label="attr"
						>
							{{ attr.attrName }}
						</a-select-option>
					</a-select-opt-group>
				</template>
			</a-select>
		</a-form-model-item>
		<a-form-model-item label="">
			<a-select
				v-model="value.functionAlias"
				placeholder="请选择"
				class="select-leng-s"
				@select="funChange"
			>
				<a-select-option
					:title="fun.functionAlias"
					:value="fun.functionAlias"
					v-for="fun in functions"
					:key="fun.functionCode"
					:label="fun"
				>
					{{ fun.functionAlias }}
				</a-select-option>
			</a-select>
		</a-form-model-item>
		<div v-show="hideInput">
			<div class="templ" v-show="between">
				<a-form-model-item label="">
					<a-input
						v-model="value._params1"
						class="input-leng-s"
						@blur="params1Blur(value._params1)"
					/>
				</a-form-model-item>
				<a-form-model-item label="">
					<span class="lianzi">-</span>
					<a-input
						v-model="value._params2"
						class="input-leng-s"
						@blur="params2Blur(value._params2)"
					/>
					<span class="suffix">之间</span>
				</a-form-model-item>
			</div>
			<div class="templ" v-show="absoluteBetween">
				<a-form-model-item label="">
					<a-range-picker
						class="date-range-leng"
						v-model="value._timeRange"
						@change="absoluteTime"
						:disabled-date="disabledDate"
						format="YYYY-MM-DD HH:mm:ss"
						show-time
						:allowClear="false"
					/>
					<span class="suffix">之间</span>
				</a-form-model-item>
			</div>
			<div class="templ" v-show="extractBetween">
				<a-form-model-item label="">
					<span class="lianzi">在</span>
					<a-input
						v-model="value._params1"
						class="input-leng-s"
						@blur="params1Blur(value._params1)"
					/>
				</a-form-model-item>
				<a-form-model-item label="">
					<span class="lianzi"> - </span>
					<a-input
						v-model="value._params2"
						class="input-leng-s"
						@blur="params2Blur(value._params2)"
					/>
					<span class="suffix">之间</span>
				</a-form-model-item>
			</div>
			<div class="templ" v-show="relativeCurTime">
				<a-form-model-item label="">
					<span class="lianzi">在</span>
					<a-input
						v-model="value._params1"
						class="input-leng-s"
						@blur="params1Blur(value._params1)"
					/>
				</a-form-model-item>
				<a-form-model-item label="">
					<span class="lianzi">天</span>
					<a-select
						v-model="value._params2"
						placeholder="请选择"
						class="select-leng-s"
						@select="params2Blur"
					>
						<a-select-option value="before" key="before" label="aftbeforeer">之前</a-select-option>
						<a-select-option value="after" key="after" label="after">之内</a-select-option>
					</a-select>
				</a-form-model-item>
			</div>
			<div class="templ" v-show="relativeBetween">
				<a-form-model-item label="">
					<span class="lianzi">在过去</span>
					<a-input
						v-model="value._params1"
						class="input-leng-s"
						@blur="params1Blur(value._params1)"
					/>
				</a-form-model-item>
				<a-form-model-item label="">
					<span class="lianzi">天 到过去</span>
					<a-input
						v-model="value._params2"
						class="input-leng-s"
						@blur="params2Blur(value._params2)"
					/>
					<span class="suffix">天之内</span>
				</a-form-model-item>
			</div>
			<div class="templ" v-show="relativeEventTime">
				<a-form-model-item label="">
					<span class="lianzi">在</span>
					<a-select
						v-model="value._params1"
						placeholder="请选择"
						class="select-leng-s"
						@select="params1Blur"
					>
						<a-select-option
							:value="flow.val"
							v-for="flow in timeFlow"
							:key="flow.val"
							:label="flow.label"
						>
							{{ flow.label }}
						</a-select-option>
					</a-select>
				</a-form-model-item>
				<a-form-model-item label="">
					<a-input
						v-model="value._params2"
						class="input-leng-s"
						@blur="params2Blur(value._params2)"
					/>
				</a-form-model-item>
				<a-form-model-item label="">
					<a-select
						v-model="value._params3"
						placeholder="请选择"
						class="select-leng-s"
						@select="params3Blur"
					>
						<a-select-option
							:value="unit.val"
							v-for="unit in timeUnit"
							:key="unit.val"
							:label="unit.label"
						>
							{{ unit.label }}
						</a-select-option>
					</a-select>
					<span class="suffix">之内</span>
				</a-form-model-item>
			</div>
			<div class="templ" v-show="telDefualt">
				<a-form-model-item label="">
					<a-select
						mode="tags"
						v-model="value.params"
						class="mul-select-leng"
						@search="valueSearch"
					>
						<a-select-option v-for="(val, i) in attrValues" :key="i" :value="val">
							{{ val }}
						</a-select-option>
					</a-select>
				</a-form-model-item>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { getUserAttr, getFunction, getAttrValues, getEventAttr } from '@/api/userGroup'
import { ValuesQueryInter } from './model'
const functionAarry:Array<any>=['isSet', 'notSet' ,'notEmpty' ,'isEmpty'] //隐藏输入框的code
@Component({
	name: 'UserArttr',
	components: {}
})
export default class UserArttr extends Vue {
	@Prop() private value!: any
	@Prop({ default: 'user' }) private arttrType!: 'user' | 'event'
	@Prop({ default: '' }) eventCode?: number | string
	userProperties: Array<any> = []
	eventProperties: any = {}
	functions: Array<any> = []
	attrValues: Array<any> = []
	timeFlow: Array<any> = [
		{ val: 'after', label: '之后' },
		{ val: 'before', label: '之前' },
		{ val: 'curDay', label: '当天' },
		{ val: 'curWeek', label: '当周' },
		{ val: 'curMonth', label: '当月' }
	]
	timeUnit: Array<any> = [
		{ val: 'day', label: '天' },
		{ val: 'hour', label: '小时' },
		{ val: 'minute', label: '分' },
		{ val: 'second', label: '秒' }
	]


	get between() {
		//区间
		return !!(this.value.functionCode == 'between')
	}
	get absoluteBetween() {
		//绝对时间
		return !!(this.value.functionCode == 'absoluteBetween')
	}
	get extractBetween() {
		//时段区间
		return !!(this.value.functionCode == 'extractBetween')
	}
	get relativeCurTime() {
		//相对当前时间点
		return !!(this.value.functionCode == 'relativeCurTime')
	}
	get relativeBetween() {
		//相对当前时间区间
		return !!(this.value.functionCode == 'relativeBetween')
	}
	get relativeEventTime() {
		//相对事件发生时间
		return !!(this.value.functionCode == 'relativeEventTime')
	}
	get telDefualt() {
		return !(
			this.between ||
			this.absoluteBetween ||
			this.extractBetween ||
			this.relativeCurTime ||
			this.relativeBetween ||
			this.relativeEventTime
		)
	}
	get hideInput(){
		return  !functionAarry.includes(this.value.functionCode)
	}
	@Watch('value.functionCode', { immediate: true, deep: true })
	private functionCodeChange(val: string | number) {
		//判断编辑反显时监听
		if (val == 'between' && this.value.params.length > 0) {
			this.value._params1 = this.value.params[0] || ''
			this.value._params2 = this.value.params[1] || ''
		}
		if (val == 'absoluteBetween' && this.value.params.length > 0) {
			let start = this.value.params[0] ? this.$moment(this.value.params[0]) : null
			let end = this.value.params[1] ? this.$moment(this.value.params[1]) : null
			this.value._timeRange = [start, end]
		}
		if (val == 'extractBetween' && this.value.params.length > 0) {
			this.value._params1 = this.value.params[0] || ''
			this.value._params2 = this.value.params[1] || ''
		}
		if (val == 'relativeCurTime' && this.value.params.length > 0) {
			this.value._params1 = this.value.params[0] || ''
			this.value._params2 = this.value.params[1] || ''
		}
		if (val == 'relativeBetween' && this.value.params.length > 0) {
			this.value._params1 = this.value.params[0] || ''
			this.value._params2 = this.value.params[1] || ''
		}
		if (val == 'relativeEventTime' && this.value.params.length > 0) {
			this.value._params1 = this.value.params[0] || ''
			this.value._params2 = this.value.params[1] || ''
			this.value._params3 = this.value.params[2] || ''
		}
	}

	private disabledDate(current:any) {
		return current && current > this.$moment().endOf('day')
	}

	mounted() {
		const projectId: any = localStorage.getItem('productId')
		this.getArttrList(projectId)
	}
	getArttrList(projectId: any) {
		if (this.arttrType == 'user') {
			getUserAttr(projectId).then(res => {
				const { data } = res
				if (data instanceof Array) {
					data.forEach(item => {
						item.attrType = 'user'
					})
				}
				this.userProperties = data
			})
		} else {
			getEventAttr(projectId, this.eventCode).then(res => {
				const { data } = res
				if (data.eventAttrs && data.eventAttrs.length) {
					data.eventAttrs.forEach((item: any) => {
						item.attrType = 'event'
					})
				}
				if (data.userAttrs && data.userAttrs.length) {
					data.userAttrs.forEach((item: any) => {
						item.attrType = 'user'
					})
				}
				this.eventProperties = data
			})
		}
	}
	getFunctionList(dataType: string) {
		getFunction(dataType).then(res => {
			const { data } = res
			this.functions = data || []
			if(this.functions.length > 0){
                this.value.functionAlias = this.functions[0].functionAlias
				 this.value.functionCode = this.functions[0].functionCode
			}
			
		})
	}

	getAttrValueList(queryObj: Partial<ValuesQueryInter>) {
		const projectId: any = localStorage.getItem('productId')
		const params: ValuesQueryInter = {
			projectId,
			attrType: this.arttrType,
			attrCode: '',
			keywords: '',
			size: 1000
		}
		const _params = Object.assign(params, queryObj)
		getAttrValues(_params)
			.then(res => {
				const { code, data } = res
				if (code == 200) {
					this.attrValues = data
				}
			})
			.catch(e => {
				throw e
			})
	}
	attrChange(e: any, option: any) {
		const { componentOptions } = option
		let attrCode = componentOptions?.propsData?.label.attrCode //可能获取不到为undefined
		let dataType = componentOptions?.propsData?.label.dataType //可能获取不到为undefined
		let attrType = componentOptions?.propsData?.label.attrType //可能获取不到为undefined
		if (attrCode === undefined) attrCode = ''
		if (dataType === undefined) dataType = ''
		if (attrType === undefined) attrType = ''
		this.value.attr.attrCode = attrCode
		this.value.attr.attrType = attrType
		//清空后面的表单元素
		this.value.functionAlias = ''
		this.value.params = []
		this.value._timeRange = [null, null]
		this.value._params1 = ''
		this.value._params2 = ''
		this.value._params3 = ''
		this.getAttrValueList({ attrCode })
		this.getFunctionList(dataType)
	}
	funChange(e: any, option: any) {
		//此处先清空后面的表单元素  监听时好判断是不编辑反显
		this.value.params = []
		this.value._timeRange = [null, null]
		this.value._params1 = ''
		this.value._params2 = ''
		this.value._params3 = ''

		const { componentOptions } = option
		let functionCode = componentOptions?.propsData?.label.functionCode //可能获取不到为undefined
		this.value.functionCode = functionCode
	}

	valueSearch(e: any) {
		this.getAttrValueList({ keywords: e })
	}

	params1Blur(val: string) {
		this.$nextTick(() => {
			this.value.params[0] = val
		})
	}
	params2Blur(val: string) {
		if (this.value.params[0] === undefined) {
			this.value.params[0] = ''
		}
		this.value.params[1] = val
	}
	params3Blur(val: string) {
		if (this.value.params[0] === undefined) {
			this.value.params[0] = ''
		}
		if (this.value.params[1] === undefined) {
			this.value.params[1] = ''
		}
		this.value.params[2] = val
	}
	absoluteTime(v: any[], v2: any[]) {
		this.value.params = v2
	}
}
</script>

<style lang="scss" scoped>
.attr-wrap {
	display: flex;
	align-items: center;
	.ant-form-item {
		margin-left: 4px;
		margin-bottom: 4px;
	}
}
.lianzi {
	display: inline-block;
	margin-right: 4px;
}
.suffix{
	display: inline-block;
	margin-left: 4px;
}
.templ {
	display: flex;
}
</style>
